<extend name="Public:common"/>
<block name="main">
    <script type="text/javascript" src="__JS__/index.js"></script>
    <style type="text/css">
        .banner .arrow {
            position: absolute;
            top: 25%;
            margin-top: 0;
            width: 100px;
            height: 50%;
            padding: 0;
            cursor: pointer;
        }

        .banner .arrow span, .banner .arrow span:after, .banner .arrow span:before {
            position: absolute;
            top: 50%;
            height: 2px;
            background-color: #fff;
            border-radius: 1px;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: all .4s ease;
            transition: all .4s ease
        }

        .banner .arrow span {
            margin-top: -1px;
            width: 0
        }

        .banner .arrow span:after, .banner .arrow span:before {
            content: "";
            width: 30px
        }

        .banner .arrow.btn-prev span {
            left: 50%;
            margin-left: -10px
        }

        .banner .arrow.btn-prev span:before {
            left: 0;
            bottom: 0;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transform-origin: left;
            -ms-transform-origin: left;
            transform-origin: left
        }

        .banner .arrow.btn-prev span:after {
            left: 0;
            top: 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transform-origin: left;
            -ms-transform-origin: left;
            transform-origin: left
        }

        .banner .arrow.btn-next span {
            right: 50%;
            margin-right: -10px
        }

        .banner .arrow.btn-next span:before {
            right: 0;
            bottom: 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transform-origin: right;
            -ms-transform-origin: right;
            transform-origin: right
        }

        .banner .arrow.btn-next span:after {
            right: 0;
            top: 0;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transform-origin: right;
            -ms-transform-origin: right;
            transform-origin: right
        }

        .banner .arrow:hover span {
            width: 40px
        }

        .banner .arrow:hover.btn-prev span {
            margin-left: -20px
        }

        .banner .arrow:hover.btn-next span {
            margin-right: -20px
        }

        .banner .btn-next {
            right: 2.1%
        }

        .banner .btn-prev {
            left: 2.1%
        }

        .footer-bottom ul {
            height: 44px;
            overflow-y: auto;
        }

        .footer-bottom ul::-webkit-scrollbar {
            width: 1px;
            height: 1px;
        }

        .footer-bottom ul::-webkit-scrollbar-track {
            background: #3d3d3d;
        }

        .footer-bottom ul::-webkit-scrollbar-thumb {
            background-color: #808080;
        }

        .about3-img img {
            display: block;
            max-width: 100%;
            height: auto;
            margin: 0 auto 100px;
            object-fit: cover;
            image-rendering: -webkit-optimize-contrast;
        }
    </style>

    <!-- banner -->
    <Gr:flash flashid="1"/>
    <div class="warp1">
        <h3 class="pingfang"><a href="{$Cats[1][url]}" style="color:#2c2c2c;">{$name_about.content}</a></h3>
        <div>
            <p class="p1"><a href="{$Cats[1][url]}" rel="nofollow">{$about.content}</a></p>
        </div>
    </div>
    <div class="warp2">
        <div class="warp-type">
            <p><a href="{$parent_cate.url}" class="museo-light">SEE OUR WORK</a></p>
            <div class="warp-type-list">
                <a href="{$parent_cate.url}" target="_blank" class="active museo-light">All</a>
                <Gr:subcat catid="76" id="rr" key='ii'>
                    <a href="{$parent_cate.url}" target="_blank" rel="nofollow">{$rr.catname}</a>
                </Gr:subcat>
            </div>
        </div>
        <ul class="case clear">
            <foreach name="work" item="work">
                <a href="/{$parent_cate.catdir}/{$work.id}.html" target="_blank">
                    <li>
                        <img src="__IMG__/picture/blank.gif" alt="{$work.title}" class="lazy tran imgbig"
                             data-original="{$work.thumb}">
                        <div class="case-summary">
                            <div style="position: relative;width:100%;height: 100%">
                                <p class="p1">{$work.kehu_name}</p>
                                <p class="p2">
                                    -
                                    <br>
                                    <span class="syl">{$work.title}</span>
                                    <br>{$work.keywords}</p>
                            </div>
                        </div>
                    </li>
                </a>
            </foreach>
        </ul>
        <a href="{$Cats[76][url]}" class="case-more">MORE<i>&gt;</i>
        </a>
    </div>
    <div class="warp3">
        <foreach name="category" item="category">
            <notempty name="category.article">
                <div class="warp3-list">
                    <ul>
                        <a href="{$category.url}" class="warp3-title">{$category.catname}<span>></span></a>
                        <for start="0" end="6">
                            <li><a href="{$category.article.$i.url}" target="_blank">{$category.article.$i.title}</a></li>
                        </for>
                    </ul>
                </div>
            </notempty>
        </foreach>
    </div>
    <Gr:flash flashid="3"/>
<!--    合作伙伴-->
    <Gr:flash flashid="6"/>

    <div class="warp6">
        <p class="b-title"><a href="{$Cats[111][url]}">{$Cats[111][catname]} /</a></p>
        <div class="warp6-box clear">
           <Gr:flash flashid="4" />

            <div class="warp6-right right">
                <for start="0" end="2">
                    <div class="news-list">
                        <div class="first-news">
                            <a href="{$Cats[111][url]}/zixun/{$signCategory.$i.article.0.id}">
                                <p class="title">{$signCategory.$i.article.0.title}</p>
                                <p class="summary">{$signCategory.$i.article.0.description}</p>
                            </a>
                        </div>
                        <div class="news-item">
                            <for start="1" end="9" name="j">
                                <a href="{$Cats[111][url]}/zixun/{$signCategory.$i.article.$j.id}">{$signCategory.$i.article.$j.title}</a>
                            </for>
                        </div>
                    </div>
                </for>
            </div>
        </div>
    </div>
    <div class="warp7 clear">
        <div class="news-list left warp7-left">
            <div class="first-news">
                <a href="{$Cats[111][url]}/zixun/{$signCategory.2.article.0.id}">
                    <p class="title">{$signCategory.2.article.0.title}</p>
                    <p class="summary">{$signCategory.2.article.0.description}</p>
                </a>
            </div>
            <div class="news-item">
                <for start="1" end="9">
                    <a href="{$Cats[111][url]}/zixun/{$signCategory.2.article.$i.id}">{$signCategory.2.article.$i.title}</a>
                </for>
            </div>
        </div>
        <div class="news-list right warp7-right">
            <div class="first-news">
                <a href="{$Cats[111][url]}/zixun/{$signCategory.3.article.0.id}">
                    <p class="title">{$signCategory.3.article.0.title}</p>
                    <p class="summary">{$signCategory.3.article.0.description}</p>
                </a>
            </div>
            <div class="news-item">
                <for start="1" end="9">
                    <a href="{$Cats[111][url]}/zixun/{$signCategory.3.article.$i.id}">{$signCategory.3.article.$i.title}</a>
                </for>
            </div>
        </div>
    </div>
</block>
